<script setup>
import scrollboard from './scrollboard.vue'
import rftitle from './rftitle.vue'

import { leftThreeConfig, left3Data } from '../pages/home/index'
</script>

<template>
  <!-- 三防状态 -->
  <div class="h-[58px]"></div>
  <div class="w-[320px] h-[36px] mx-auto relative">
    <img class="w-full h-full" src="../assets/one/one_left_2.png" alt="">
    <img class="w-[80px] h-[36px] left-[40px] bottom-[12px] absolute" src="../assets/one/one_left_3.png" alt="">
    <img class="w-[48px] h-[48px] left-[56px] bottom-[26px] absolute " src="../assets/three/three1.png" alt="">
    <span class="absolute left-[152px] bottom-[16px] text-white text-[16px]">机组运行健康状态</span>
    <span :class="left3Data.jzyxjkzt == '异常' ? 'status_color' : 'main_color'"
      class="absolute left-[152px] bottom-[42px] text-white text-[24px]  font-semibold">{{
      left3Data.jzyxjkzt }}</span>
  </div>

  <rftitle class="my-[24px]" title="通风方式"></rftitle>

  <div class="flex items-center">
    <div class="w-[80px] h-[80px] liubian flex justify-center items-center">
      <img class="w-[24px] h-[24px] around_rotate" src="../assets/three/three2.png" alt="">
    </div>

    <div class="text-[16px] text-white flex-1 pl-[24px]">
      <div class="flex mb-[14px]">
        当前通风方式
      </div>
      <div class="flex text-[24px] status_color1 font-semibold">
        {{ left3Data.dqtffs }}
      </div>
    </div>
  </div>



  <rftitle class="mt-[32px] mb-[24px]" title="除湿空调机组"></rftitle>

  <div class="flex items-center mb-[16px]">
    <div class="w-[80px] h-[80px] liubian flex justify-center items-center">
      <img class="w-[24px] h-[24px] " src="../assets/three/three3.png" alt="">
    </div>
    <div class="text-[16px] text-white flex-1 pl-[10px]">
      <div class="flex mb-[16px]">
        除湿空调南
      </div>
      <div class="flex  text-[14px] flex flex-wrap gap-[12px] ">
        <div class="w-[47%]" style="color: #B2E5FF;">
          进风温度：<span class="text-white">{{ left3Data.csktnjfwd }}</span>
        </div>
        <div class="w-[47%]" style="color: #B2E5FF;">
          位置： <span class="text-white">{{ left3Data.csktnwz }}</span>
        </div>
        <div class="w-[47%]" style="color: #B2E5FF;">
          进风湿度：<span class="text-white">{{ left3Data.csktnjfsd }}</span>
        </div>
        <div class="w-[47%]" style="color: #B2E5FF;">
          <!-- 模式：<span style="color: #80FF80;" class="text-white">除温除湿</span> -->
          模式：<span class="text-white" style='line-height:20px;'>{{ left3Data.csktnms }}</span>
        </div>
      </div>
    </div>
  </div>

  <div class="flex items-center mb-[16px]">
    <div class="w-[80px] h-[80px] liubian flex justify-center items-center">
      <img class="w-[24px] h-[24px] " src="../assets/three/three3.png" alt="">
    </div>
    <div class="text-[16px] text-white flex-1 pl-[10px]">
      <div class="flex mb-[14px]">
        除湿空调北
      </div>
      <div class="flex  text-[14px] flex flex-wrap gap-[12px]">
        <div class="w-[47%]" style="color: #B2E5FF;">
          进风温度：<span class="text-white">{{ left3Data.csktbjfwd }}</span>
        </div>
        <div class="w-[47%]" style="color: #B2E5FF;">
          位置： <span class="text-white">{{ left3Data.csktbwz }}</span>
        </div>
        <div class="w-[47%]" style="color: #B2E5FF;">
          进风湿度：<span class="text-white">{{ left3Data.csktbjfsd }}</span>
        </div>
        <div class="w-[47%]" style="color: #B2E5FF;">
          <!-- 模式：<span style="color: #FF8080;" class="text-white">停机</span> -->
          模式：<span class="text-white">{{ left3Data.csktbms }}</span>
        </div>
      </div>
    </div>
  </div>

  <div class="flex items-center">
    <div class="w-[80px] h-[80px] liubian flex justify-center items-center">
      <img class="w-[24px] h-[24px] " src="../assets/three/three3.png" alt="">
    </div>
    <div class="text-[16px] text-white flex-1  pl-[10px]">
      <div class="flex mb-[14px]">
        电站空调
      </div>
      <div class="flex  text-[14px] flex flex-wrap gap-[12px]">
        <div class="w-[47%]" style="color: #B2E5FF;">
          空调状态：<span class="text-white">{{ left3Data.dzktzt }}</span>
        </div>


      </div>
    </div>
  </div>


  <div class="mt-[20px] h-[290px]">
    <scrollboard title="电动阀门状态" :config="leftThreeConfig"></scrollboard>
  </div>
</template>

<style scoped></style>
